import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-actions',
  templateUrl: './actions.component.html',
  styles: [
    `
      .list-demo-avatar {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: #ffffff;
        font-size: 14px;
        line-height: 22px;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        list-style: none;
        border: 1px solid rgba(0, 0, 0, 25%);
        border-radius: 50%;
      }
      .list-demo-avatar > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ActionsComponent implements OnInit {
  data = [
    {
      title: `This is the title of the long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long target`,
      description: `So strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions, I seemed distinctly to perceive that my strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions, I seemed distinctly to perceive that my`,
      image: '',
    },
    {
      title: 'This is the title of the target',
      description: `So strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions, I seemed distinctly to perceive that my`,
      image: '',
    },
    {
      title: 'This is the title of the target',
      image: '',
    },
  ];

  tags = [];

  ngOnInit(): void {
    this.tags = Array.from({ length: 3 }).fill({
      value: 'This is tag',
      label: 'This is tag',
    });
  }

  getItems() {
    return [
      { id: 'Actions', label: 'Actions' },
      { id: 'Edit', label: 'Edit' },
      { id: 'Open', label: 'Open' },
    ];
  }
}
